<template>
    <nly-content-wrapper class="a-base-container">
        <div class="wh100 resize-table-container" style="padding:10px;">
            <a-tabs class="wh100" defaultActiveKey="0" @change="changeTab">

                <a-tab-pane class="wh100" tab="账套管理" key="1">
                    <div class="inner-container wh100 table-container">
                        <a-card class="left-tree">
                            <a-tree :tree-data="yearData" @select="onSelect" default-expand-all :selected-keys="selectedYearKeys"></a-tree>
                        </a-card>
                        <div class="right-data">
                            <!-- 账套基本信息 -->
                            <a-form ref="formReport" :form="form">
                                <a-row>
                                    <a-col :span="7">
                                        <a-form-item label="账套名称" v-bind="formItemLayout">
                                            <a-input allowClear size="large" type="text" autocomplete="false" placeholder="请输入账套名称" v-decorator="[
                          'fullName',
                          {
                            rules: [
                              { required: true, message: '请输入账套名称' },
                            ],
                            validateTrigger: [ 'blur']
                          },
                        ]"></a-input>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item label="法人代表" v-bind="formItemLayout">
                                            <a-input allowClear size="large" type="text" autocomplete="false" placeholder="请输入法人代表" v-decorator="[
                          'legalPerson'
                        ]"></a-input>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item label="单位名称" v-bind="formItemLayout">
                                            <a-input allowClear size="large" type="text" autocomplete="false" placeholder="请输入单位名称" v-decorator="[
                          'companyName',
                          {
                            rules: [
                              { required: true, message: '请输入单位名称' },
                            ],
                            validateTrigger: [ 'blur']
                          },
                        ]"></a-input>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item label="邮政编码" v-bind="formItemLayout">
                                            <a-input allowClear size="large" type="text" autocomplete="false" placeholder="请输入邮政编码" v-decorator="[
                          'companyZip'
                        ]"></a-input>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item v-bind="formItemLayout" label="本币名称">人民币</a-form-item>
                                    </a-col>
                                    <a-col :span="1">
                                    </a-col>
                                    <a-col :span="7">
                                        <a-form-item v-bind="formItemLayout" label="本币代码">RMB</a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item v-bind="formItemLayout" label="企业类型">
                                            <a-select size="large" placeholder="企业类型" @change="industryChange" v-decorator="[
                          'companyType',
                          {
                            rules: [
                              {required: true, message: '请选择企业类型' },
                            ]
                          },
                        ]">
                                                <a-select-option v-for="(item,index) in companyTypeList" :key="index" :value="item">{{item}}</a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item v-bind="formItemLayout" label="行业性质">
                                            <a-select size="large" placeholder="请选择行业性质" @change="industryChange" v-decorator="[
                          'trade',
                          {
                            rules: [
                              {required: true, message: '请选择行业性质' },
                            ]
                          },
                        ]">
                                                <a-select-option v-for="(item,index) in industryList" :key="index" :value="item.name">{{item.name}}</a-select-option>
                                            </a-select>
                                            <!-- <a-select
                        size="large"
                        style="width:47%;margin-left:6%;"
                        placeholder="请选择所属行业"
                        v-decorator="[
                          'middleIndustry',
                          {
                            rules: [
                              {required: true, message: '请选择所属行业' },
                            ],
                            validateTrigger: [ 'blur']
                          },
                        ]"
                      >
                        <a-select-option
                          v-for="(item,index) in industryList"
                          :key="index"
                          value="item.id"
                        >{{item.name}}</a-select-option>
                      </a-select> -->
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item label="联系电话" v-bind="formItemLayout">
                                            <a-input allowClear size="large" type="text" autocomplete="false" placeholder="请输入联系电话" v-decorator="[
                          'phone'
                        ]"></a-input>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item v-bind="formItemLayout" label="行政区">
                                            <a-cascader placeholder="请选择行政区" size="large" :field-names="{ label: 'title', value: 'key',children: 'children'}" v-decorator="[
                          'areaIdArr',
                          {
                            rules: [
                              { type: 'array', required: true, message: '请选择行政区' },
                            ]
                          },
                        ]" :options="regions" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item label="开户银行" v-bind="formItemLayout">
                                            <a-input allowClear size="large" type="text" autocomplete="false" placeholder="请输入开户银行" v-decorator="[
                          'companyBank'
                        ]"></a-input>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item v-bind="formItemLayout" label="报税地区">
                                            <a-select size="large" placeholder="请选择报税地区" v-decorator="[
                          'taxArea'
                        ]">
                                                <a-select-option v-for="(item,index) in taxAreaList" :key="index" :value="item.id">{{item.text}}</a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item label="统一代码" v-bind="formItemLayout">
                                            <a-input allowClear size="large" type="text" autocomplete="false" placeholder="请输入统一代码" v-decorator="[
                          'unifiedSocialCoding'
                        ]"></a-input>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item v-bind="formItemLayout" label="纳税性质">
                                            <a-select style="margin-left:4px;" size="large" placeholder="请选择纳税性质" v-decorator="[
                          'taxCateLog'
                        ]">
                                                <a-select-option v-for="(item,index) in taxNatureList" :key="index" :value="item.id">{{item.text}}</a-select-option>
                                            </a-select>
                                        </a-form-item>
                                    </a-col>

                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item label="税率%" v-bind="formItemLayout">
                                            <a-input allowClear size="large" type="number" min="0" max="100" autocomplete="false" placeholder="请输入税率" v-decorator="[
                          'taxRate'
                        ]"></a-input>
                                        </a-form-item>
                                    </a-col>
                                    <!-- <a-col :span="7">
                    <a-form-item label="开票账号" v-bind="formItemLayout">
                      <a-input
                        allowClear
                        size="large"
                        type="text"
                        autocomplete="false"
                        placeholder="请输入开票账号"
                        v-decorator="[
                          'account'
                        ]"
                      ></a-input>
                    </a-form-item>
                  </a-col> -->
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item v-bind="formItemLayout" label="备注">
                                            <a-input allowClear size="large" type="text" autocomplete="false" placeholder="请输入备注" v-decorator="[
                          'remarks'
                        ]"></a-input>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-item label="账套主管" v-bind="formItemLayout">
                                            <input-group-search modalTitle="选择拥有者" labelStyle="display:none;" rightClass="myRightClass" class="ml-1 mb-2" v-model="accMaster.accMasterId" :valueTitle.sync="accMaster.accMasterName" treeType="officeUser" :clearValueIcon="false"></input-group-search>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-row>
                                    <a-col span="15" style="display:flex;justify-content:center;">
                                        <a-button type="primary" @click="save" icon="save">保存</a-button>
                                    </a-col>
                                </a-row>
                            </a-form>
                            <!-- 会计期间信息 -->
                            <div class="a-button-bar">
                                <div class="a-query-box" style="width:700px;justify-content: space-between;">
                                    <div style="display:flex;">
                                        <div class="label">启用年度：</div>
                                        <div class="value">
                                            {{currentErpPeriodVo.currentYear || '--'}}
                                        </div>
                                        <div class="label" style="margin-left:10px;">启用期间：</div>
                                        <div class="value">
                                            {{currentErpPeriodVo.currentYear ? (currentErpPeriodVo.currentYear == currentErpPeriodVo.enableYear ? currentErpPeriodVo.enableDuration : 1) : '--'}}月
                                        </div>
                                    </div>
                                    <div class="a-button-bar" style="">
                                        <a-button type="primary" @click="AddAccounting" icon="plus">新增</a-button>
                                        <a-button type="primary" @click="EditAccountingFun" icon="edit">修改</a-button>
                                        <a-popconfirm title="确定删除吗?" @confirm="() => deleteLastYear()" :disabled="selectedYearKeys[0] && selectedYearKeys[0] < lastYear">
                                            <a-button type="danger" icon="delete" :disabled="selectedYearKeys[0] && selectedYearKeys[0] < lastYear">删除</a-button>
                                        </a-popconfirm>
                                    </div>
                                </div>
                            </div>
                            <a-table class="middle-table" :columns="columns" :pagination="false" :data-source="(currentErpPeriodVo && currentErpPeriodVo.erpPeriodList) || []" :scroll="scroll" bordered>

                            </a-table>

                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane class="wh100" tab="账户启用" key="2" style="display:flex;">
                    <enabled style="margin:0px;padding-top:0px;"></enabled>
                </a-tab-pane>
                <a-tab-pane class="wh100" tab="编码规则" key="3">
                    <a-table class="a-base-table wh100" :columns="ruleColumns" :pagination="false" :data-source="ruleDataSource" :loading="loading" :scroll="scroll" bordered>
                    </a-table>
                    <a-button type="primary" style="margin-left:15px" size="large" @click="saveRule" icon="save">保存</a-button>
                </a-tab-pane>

            </a-tabs>
        </div>
        <editAccounting ref="editAccounting" @ok="editAccountingOk"></editAccounting>
    </nly-content-wrapper>
</template>
<script>
import moment from "moment";
import dataMixins from "@/mixins/dataMixins";
import { areaPageListToTreeForId } from "@/utils/tree";
import { treeList } from "@/api/area";
import { industryList } from "@/api/industry";
import { getSysCompany, saveCompanyInfo } from "@/api/companyInfo";
import { list as ListPeriod, deleteLastYear } from "@/api/erp/period";
import { list as ListGradeRule, save as SaveGradeRule } from "@/api/erp/gradeRule";

const editAccounting = () => import("./model/editAccounting");

export default {
    // mixins: [dataMixins],
    components: {
        enabled: () => import("./enabled"),
        editAccounting
    },
    data() {
        return {
            companyTypeList: ["工业", "商业", "服务业", "金融业"],
            //行政区信息
            regions: [],
            //行业信息列表
            industryList: [],
            //报税地区列表
            taxAreaList: [
                { id: 1, text: "重庆市" },
                { id: 1, text: "四川省" }
            ],
            //纳税性质列表
            taxNatureList: [
                { id: 1, text: "纳税性质" }
            ],
            //输入框布局
            formItemLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 18 }
            },
            //其他布局
            formItemLayoutOther: {
                labelCol: { span: 10 },
                wrapperCol: { span: 14 }
            },
            //表单信息
            form: this.$form.createForm(this, { name: "message" }),
            //会计年份数据
            yearData: [
                {
                    title: "账套年份",
                    key: "0",
                    children: [
                        // { title: "2019", key: "2019" },
                        // { title: "2020", key: "2020" }
                    ]
                }
            ],
            //会计期间 Map
            periodMap: new Map(),
            //当前年份
            year: moment().format("YYYY"),
            lastYear: moment().format("YYYY"),
            //当前选择的年度
            selectedYearKeys: [],
            //当前选择的年度 会计期间
            currentErpPeriodVo: {},
            //表格滚动条
            scroll: { y: 500, x: 500 },
            //会计期间 表头信息
            columns: [
                {
                    title: "期间",
                    width: 140,
                    dataIndex: "currentPeriod",
                    customRender: (text, row, index) => {
                        return text + "月";
                    }
                },
                {
                    title: "起始日期",
                    width: 140,
                    dataIndex: "beginDate"
                },
                {
                    title: "结束日期",
                    width: 140,
                    dataIndex: "endDate",
                }
            ],
            //编码规则数据
            ruleDataSource: [
                { project: '科目编码级次', maxLength: '40' },
                { project: '物料分类编码级次', maxLength: '12' },
                { project: '结算方式编码级次', maxLength: '3' },
                { project: '货位编码级次', maxLength: '20' },
                { project: '收发类别编码级次', maxLength: '5' }
            ],
            // 编码规则标题
            ruleColumns: [
                {
                    title: "项目",
                    width: 200,
                    dataIndex: "title"
                },
                {
                    title: "最大长度",
                    dataIndex: "maxLen",
                    width: 60,
                    customRender: (text, record) => {
                        const key = "maxLen";
                        const change = e => {
                            record[key] = e.target.value;
                        };
                        return <a-input value={record[key]} onChange={change}></a-input>;
                    }
                },
                {
                    title: "第1级",
                    dataIndex: "level1",
                    width: 80,
                    customRender: (text, record) => {
                        return <a-input value={record.level && record.level[0] || ''} onChange={(e) => this.onChangeRuleLevel(e, record, 0)}></a-input>;
                    }
                },
                {
                    title: "第2级",
                    dataIndex: "level2",
                    width: 80,
                    customRender: (text, record) => {
                        return <a-input value={record.level && record.level[1] || ''} onChange={(e) => this.onChangeRuleLevel(e, record, 1)}></a-input>;
                    }
                },
                {
                    title: "第3级",
                    dataIndex: "level3",
                    width: 80,
                    customRender: (text, record) => {
                        return <a-input value={record.level && record.level[2] || ''} onChange={(e) => this.onChangeRuleLevel(e, record, 2)}></a-input>;
                    }
                },
                {
                    title: "第4级",
                    dataIndex: "level4",
                    width: 80,
                    customRender: (text, record) => {
                        return <a-input value={record.level && record.level[3] || ''} onChange={(e) => this.onChangeRuleLevel(e, record, 3)}></a-input>;
                    }
                },
                {
                    title: "第5级",
                    dataIndex: "level5",
                    width: 80,
                    customRender: (text, record) => {
                        return <a-input value={record.level && record.level[4] || ''} onChange={(e) => this.onChangeRuleLevel(e, record, 4)}></a-input>;
                    }
                },
                {
                    title: "第6级",
                    dataIndex: "level6",
                    width: 80,
                    customRender: (text, record) => {
                        return <a-input value={record.level && record.level[5] || ''} onChange={(e) => this.onChangeRuleLevel(e, record, 5)}></a-input>;
                    }
                },
                {
                    title: "第7级",
                    dataIndex: "level7",
                    width: 80,
                    customRender: (text, record) => {
                        return <a-input value={record.level && record.level[6] || ''} onChange={(e) => this.onChangeRuleLevel(e, record, 6)}></a-input>;
                    }
                },
                {
                    title: "第8级",
                    dataIndex: "level8",
                    width: 80,
                    customRender: (text, record) => {
                        return <a-input value={record.level && record.level[7] || ''} onChange={(e) => this.onChangeRuleLevel(e, record, 7)}></a-input>;
                    }
                },
                {
                    title: "第9级",
                    dataIndex: "level9",
                    width: 80,
                    customRender: (text, record) => {
                        return <a-input value={record.level && record.level[8] || ''} onChange={(e) => this.onChangeRuleLevel(e, record, 8)}></a-input>;
                    }
                }
            ],
            //账套主管信息
            accMaster: {},
            //标签切换的下标
            tabKeys: 0,
        };
    },
    created() {
        this.areaTree();
        this.ListIndustry();
        this.selectedYearKeys = [this.year + '']
    },
    mounted() {
        this.getSysCompany();
        this.ListPeriod();
    },
    computed: {

    },
    methods: {
        onChangeRuleLevel(e, record, index) {


            e.target.value = e.target.value.replace(/^(0+)|[^\d]+/g, '');
            let value = e.target.value;
            console.log("onChangeRuleLevel", value, record, index);
            if (!index && 0 != index) {
                setTimeout(() => {
                    e.target.value = record.level[index] || "";
                }, 500);
                return false;
            }
            value = parseInt(value);
            //获取最大编码长度
            let maxLength = parseInt(record.maxLen);
            let level = record.level;
            if (!level) {
                if (value > maxLength) {
                    this.$message.error("编码级次总长度不能大于最大长度");
                    setTimeout(() => {
                        e.target.value = record.level[index] || "";
                    }, 500);
                    return false;
                } else {
                    record.level = [value];
                }
            } else {
                let total = value;
                level.forEach && level.forEach((item, i) => {
                    if (item && i != index) {
                        total += parseInt(item);
                    }
                })
                console.log("total > maxLength", total, maxLength, total > maxLength)
                if (total > maxLength) {
                    this.$message.error("编码级次总长度不能大于最大长度");
                    setTimeout(() => {
                        e.target.value = record.level[index] || "";
                    }, 500);
                    return false;
                } else {
                    record.level[index] = value;
                }
            }
        },
        //标签切换调用
        changeTab(key) {
            console.log(key);
            this.tabKeys = key;
            if (key == 3) {
                this.loadRuleList();
            }
        },
        //加载 区域数据
        areaTree() {
            treeList()
                .then(response => {
                    if (response.code === 200) {
                        const { data } = response;
                        const childrenNav = [];
                        areaPageListToTreeForId(data, childrenNav, 0);
                        console.log("加载 区域数据:", childrenNav);
                        this.regions = childrenNav;
                    }
                })
                .catch(error => { });

        },
        //加载行业性质
        ListIndustry() {
            industryList()
                .then(response => {
                    if (response.code === 200) {
                        const { data } = response;
                        this.industryList = data;
                    }
                })
                .catch(error => { });
        },

        industryChange(value) {
            console.log("选择行业性质：", value)
        },
        //获取公司信息
        getSysCompany() {
            getSysCompany()
                .then(response => {
                    if (response.code === 200) {
                        const { data } = response;
                        this.accMaster.accMasterId = data.accMasterId;
                        for (let key in data) {
                            this.form.setFieldsValue({
                                [key]: data[key],
                            });
                        }
                        console.log("获取公司基本信息测试：", data);
                        if (data.areaIds) {
                            let strArr = data.areaIds.split(",");
                            let numArr = strArr.map((value, index, array) => {
                                value = value * 1;
                                return value;
                            })
                            console.log("测试", numArr);
                            this.form.setFieldsValue({
                                areaIdArr: numArr
                            });
                        }

                    }
                })
                .catch(error => { });
        },

        //保存公司基本信息
        save() {

            this.form.validateFields((err, values) => {
                if (err) return false;
                const postData = { ...values };
                let { accMasterId, accMasterName } = this.accMaster;
                accMasterId = accMasterId * 1;
                Object.assign(postData, { accMasterId, accMasterName });
                let { areaIdArr } = postData;
                postData.areaIds = areaIdArr.join(",");
                postData.areaId = areaIdArr[areaIdArr.length - 1];
                console.log("保存公司基本信息2:", postData);
                //保存
                saveCompanyInfo(postData)
                    .then(response => {
                        if (response.code === 200) {
                            this.$message.success("保存成功");
                        }
                    })
                    .catch(error => { });

            });
        },
        //获取会计期间
        ListPeriod() {
            const { periodMap, year } = this;
            let { lastYear } = this;
            ListPeriod().then(response => {
                if (response.code === 200) {
                    this.lastYear = year;
                    let yearDataChildren = [];
                    const { data } = response;
                    data.forEach(item => {
                        if (lastYear < item.currentYear) {
                            lastYear = item.currentYear
                        }
                        periodMap.set(item.currentYear, item);
                        yearDataChildren.push({
                            title: item.currentYear + '',
                            key: item.currentYear + ''
                        });
                    });
                    this.lastYear = parseInt(lastYear);
                    this.$set(this.yearData[0], "children", yearDataChildren);
                    this.currentErpPeriodVo = periodMap.get(year * 1) || {};
                    this.selectedYearKeys = [this.year + '']

                    console.log("转换后的会计期间：periodMap-》", periodMap, this.currentErpPeriodVo, this.yearData);


                }
            }).catch(error => { });
        },
        //当点击数的节点时，切换表格数据
        onSelect(selectedKeys, info) {
            const { periodMap } = this;
            this.currentErpPeriodVo = periodMap.get(selectedKeys[0] * 1);
            this.selectedYearKeys = selectedKeys;
            console.log("selected", selectedKeys, info);
        },
        check() {
            this.form.validateFields(err => {
                if (!err) {
                    console.info("success");
                }
            });
        },


        //添加 会计期间
        AddAccounting: function () {
            const { periodMap, year } = this;
            let { lastYear } = this;
            let data = {
                title: "会计期间-新增",
                isFirstYear: periodMap.size == 0,
                lastYear: periodMap.size == 0 ? null : lastYear
            }
            console.log("AddAccounting_lastYear", lastYear, periodMap.size)
            Object.assign(this.$refs.editAccounting, { ...data })
            this.$refs.editAccounting.add();

            // this.$refs.editAccounting.disableSubmit = false;
        },
        //编辑 会计期间
        EditAccountingFun() {
            const { currentErpPeriodVo } = this;
            if (null == currentErpPeriodVo) this.$message.warning('请选择年份');
            let currentYear = currentErpPeriodVo.erpPeriodList[0].currentYear;
            let enableDuration = currentErpPeriodVo.enableDuration
            let data = {
                title: "会计期间-编辑",
                isFirstYear: currentYear == currentErpPeriodVo.enableYear,
                lastYear: currentYear - 1,
                enableDuration
            }
            console.log("EditAccountingFun_lastYear", currentErpPeriodVo)
            Object.assign(this.$refs.editAccounting, { ...data })
            this.$refs.editAccounting.edit(currentErpPeriodVo.erpPeriodList);
        },
        // 保存会计期间 成功后 的 callback
        editAccountingOk() {
            this.ListPeriod();
        },
        // 删除 会计期间
        deleteLastYear() {
            const { selectedYearKeys } = this;
            let lastYear = selectedYearKeys[0];
            if (!lastYear) {
                this.$message.warning("请选择年份");
                return false;
            }
            deleteLastYear({ lastYear })
                .then(response => {
                    if (response.code === 200) {
                        this.$message.success('删除成功');
                        this.ListPeriod();
                    }
                })
                .catch(error => { });
        },


        //加载 编码规则
        loadRuleList(arg) {
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.pagination.current = 1;
            }
            var params = {}; //查询条件
            this.loading = true;
            ListGradeRule(params).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.ruleDataSource = this.getRuleData(res.data);

                } else {
                    // this.$message.warning(res.message);
                }
                this.loading = false;
            })

        },
        //处理 编码规则数据
        getRuleData(data) {
            for (let j = 0; j < data.length; j++) {
                let level = data[j].codingRule.split('');
                data[j].level = level;

            }
            console.log(data);
            return data;

        },
        //保存 编码规则数据
        saveRule() {
            let data = Object.assign([], this.ruleDataSource);
            for (let i = 0; i < data.length; i++) {
                data[i].codingRule = data[i].level.filter(item => item).join("");
                delete data[i].level;
            }
            console.log(data);
            console.log(this.ruleDataSource);
            // return;
            SaveGradeRule(data).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.$message.success('保存成功');
                    this.loadRuleList();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },


    }
};
</script>
<style lang="less">
.ant-tabs-content {
    height: calc(100% - 110px);
}
.middle-table {
    width: 700px;
    .ant-table-body {
        height: calc(100vh - 400px);
    }
}

.h3 {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}
.table-container {
    display: flex;
    justify-content: flex-start;
}
.left-tree {
    width: 160px;
    padding: 0px;
    height: 100%;
    margin-right: 10px;
}
.right-data {
    width: calc(100% - 170px);
    overflow-y: scroll;
}
</style>
 